import React from 'react'
import Un from  '../5-10/分页/index'
class Home extends React.Component {
    constructor() {
        super()
        this.state = {
            name: '123',
            email: '',
            text: '',
            college: {
                base: {
                    name: '',
                    age: '',
                    genders: 'male'
                },
                web1906: {
                    name: '',
                    email: '',
                    text: ''
                }
            },
            time:'2021.5.11'
        }
    }

    // componentDidMount() {
    //     axios.get('api/userinfo', {
    //         pageNo: 1,
    //         pageSize: 4,
    //     }, {}).then((res) => {
    //         console.log(res)
    //     })
    // }
    Fn = () => {
        const { name, email, text, college,time } = this.state;
        const data={
            uname:name,
            email:email,
            content:text
        }
        Un.postApi('/api/add',data,{
                     'Content-Type':'application/x-www-form-urlencoded',
                })
        // console.log(
        //     {"msg":[{'Id':35,'Uname':name,"Email":email,"Context":text,"InsertTime":time}]}
        // )
        // console.log(name, email, text, college)
    }
    Change = (e) => {
        let name = e.target.name
        this.setState({
            [name]: e.target.value
        })
        console.log(e.target.value)
    }
    render() {
        const { name, email, text, college } = this.state
        return (
            <div>
                <label htmlFor="" style={{ display: 'block', textAlign: 'center' }}>
                    <input type="text" value={name} placeholder='用户名' name='name' onChange={(e)=>this.Change(e)} />
                </label>
                <label htmlFor="" style={{ display: 'block', textAlign: 'center' }}>
                    <input type="text" value={email} placeholder='邮箱' name='email' onChange={this.Change} />
                </label>
                <label htmlFor="" style={{ display: 'block', textAlign: 'center' }}>
                    <input type="text" value={text} name='text' placeholder='内容' onChange={this.Change} />
                </label>
                {/* base */}
                <label htmlFor="" style={{ display: 'block', textAlign: 'center' }}>
                    <input type="text" value={college.base.name} placeholder='base.name' />
                    <input type="text" value={college.base.age} placeholder='base.age' />
                    <input type="text" value={college.base.genders} placeholder='base.genders' />
                </label>
                {/* web1906 */}
                <label htmlFor="" style={{ display: 'block', textAlign: 'center' }}>
                    <input type="text" name="" id="" value={college.web1906.name} placeholder='web1906.name' />
                    <input type="text" name="" id="" value={college.web1906.email} placeholder='web1906.email' />
                    <input type="text" name="" id="" value={college.web1906.text} placeholder='web1906.text' />
                </label>
                <button onClick={this.Fn}>
                    提交
                </button>
            </div>
        )
    }
}
export default Home
/*
1.打包到代理服务器
2.nginx代理 前端路由重写
3.表单提交 实现
*/
/*
http://api.bdplus.cn/
this.state={
    name:'',
    email:'',
    text:'',
    college:{
        base:{
            name:'',
            age:'',
            genders:'male'
        },
        web1906:{
            name:'',
            email:'',
            text:''
        }
    }
}

*/